<template>
    <div id="Statistical_Into">
        <el-card class="box-card">
            <el-form ref="form" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item>
                    <el-button type="primary" size="small" @click="addRecharge">添加文案</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="issex"
                        label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type=='title'">标题</span>
                        <span v-if="scope.row.type=='cover'">封面</span>
                        <span v-if="scope.row.type=='dropdown'">原文引导模板</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="coverpic"
                        label="内容">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type=='title'">{{scope.row.content}}</span>
                        <img :src="scope.row.content" width="60" alt="" v-else>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <p style="text-align: center">
                            <el-button type="primary" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                            <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        :layout="this.$store.state.paginationLayout">
                </el-pagination>
            </div>
        </el-card>
        <!--            新增或编辑-->
        <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="dataForm" :label-width="this.$store.state.setLabelWidth" size="small">
                        <!--                        <el-form-item label="类型"-->
                        <!--                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">-->
                        <!--                            <el-select v-model="dataForm.type" placeholder="类型"-->
                        <!--                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">-->
                        <!--                                <el-option label="标题" value="title"></el-option>-->
                        <!--                                <el-option label="封面" value="cover"></el-option>-->
                        <!--                                <el-option label="原文引导模板" value="dropdown"></el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="内容">
                            <el-input v-model="dataForm.content"></el-input>
                        </el-form-item>
                        <!--                        <el-form-item label="内容" v-if="dataForm.type=='cover'||dataForm.type=='dropdown'">-->
                        <!--                            <el-upload-->
                        <!--                                    class="avatar-uploader"-->
                        <!--                                    action="upDataUrl"-->
                        <!--                                    :show-file-list="false"-->
                        <!--                                    :http-request="myUpload"-->
                        <!--                                    :before-upload="beforeAvatarUpload">-->
                        <!--                                <img v-if="dataForm.content" :src="dataForm.content" class="avatar">-->
                        <!--                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                        <!--                            </el-upload>-->
                        <!--                        </el-form-item>-->
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
  import {uploadimg} from '../../utils/common'

  export default {
    name: "Statistical_Into",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        tableData: [],
        fromTitle: '',
        visible: false,
        btype: 2,
        title: '',
        author: '',
        formTitle: '',
        bookId: '',
        dataForm: {
          content: '',
          type: 'title',
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          type: 'title'
        };
        this.$axios.get("admin/material", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      addRecharge() {
        this.formTitle = '新增';
        this.id = '';
        this.dataForm = {
          content: '',
          type: 'title',
        };
        this.visible = true;
      },
      edit(id) {
        this.id = id;
        this.formTitle = '编辑';
        this.$axios.get('admin/material/' + id).then((res) => {
          this.dataForm = res.data;
          this.visible = true;
        });
      },
      // 确认提交添加或编辑用户
      dialogAffirm() {
        if (this.id) {
          this.$axios.put('admin/material/' + this.id, this.dataForm).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        } else {
          // 添加
          this.$axios.post('/admin/material', this.dataForm).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        }
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/material/' + id, '').then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      beforeAvatarUpload(file) {
        var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
        let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
        if (arr.indexOf(suffix) === -1) {
          this.$message.error('上传图片格式有误');
          return false
        }
      },
      // 上传文件
      myUpload(content) {
        uploadimg(content).then(res => {
          this.dataForm.content = res;
        })
      },
      closeDatails(data) {
        this.visible = data;
        this.getList();
      }
    }
  }
</script>

<style scoped>

</style>